<template>
	<view class="work-item">
		<image @tap="goWorkDetail()" :src="itemInfo.multimedia.cover.url"></image>
		<view class="info">
			<view class="work-desc">{{itemInfo.user.bio}}</view>
			<view class="author-info u-f-ac">
				<view class="author-detail u-f-ac">
					<image class="avatar" :src="itemInfo.user?itemInfo.user.avatar:'http://s-dev.lanqb.com/AcAmzM525Qob9mlxCsD1lCJtqZ.jpg?imageMogr2/auto-orient/size-limit/80k!/thumbnail/250x/gravity/Center/crop/189x189'"></image><text class="text-over u-f1">{{itemInfo.user.nickname}}</text>
				</view>
				<view @tap="changeLike"  :class="{
					'liked': isLike
				}" :hover-stay-time="1000" hover-class="animated rollOut" class="u-f1 icon iconfont iconxihuan zan"></view>{{itemInfo.statistic.like}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemInfo: {
				type: Object,
				default: {
					
				}
			}
		},
		data() {
			return {
				isLike:false
			};
		},
		
		mounted(){
			this.initData();
			
		},
		methods:{
			initData(){
				console.log(this.itemInfo)
				this.isLike = this.itemInfo.i_like
			},
			changeLike(){				
				this.$nextTick(()=>{
					setTimeout(()=>{
						this.isLike = this.itemInfo.i_like
					},1000)
				})
				this.$emit('changeLike',this.itemInfo['work_id'])
			},
			goWorkDetail(){
				uni.navigateTo({
					url: `work/work_detail/work_detail?workIndex=${this.itemInfo.work_id}`,
					fail(err) {
						console.log(err)
					}
				})
				// uni.navigateTo({
				// 	url: `work/work_detail/work_detail?workInfo=${encodeURIComponent(JSON.stringify(this.itemInfo))}`,
				// 	fail(err) {
				// 		console.log(err)
				// 	}
				// })
				// this.$emit('goWorkDetail',this.itemInfo['work_id'])
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.work-item {
		width: 339upx;
		overflow: hidden;
		border-radius: 8upx 8upx 0upx 0upx;
		padding-bottom: 29upx;
		background-color: #FFFFFF;
		>image {
			width: 100%;
			height: 339upx;

		}

		.info {
			padding-left: 20upx;
			padding-top: 11upx;
			padding-right: 10rpx;
			.work-desc {
				line-height: 62upx;
				font-size: 32upx;
				font-weight: 400;
				color: rgba(26, 27, 30, 1);
			}

			.author-info {
				font-size: 20upx;
				color: #8C8C8C;
				.author-detail {
					padding-right: 25upx;
					color: #8C8C8C;
					font-size: 24upx;
					width: 50%;
					>image {
						width: 34upx;
						height: 34upx;
						border-radius: 50%;
						margin-right: 6upx;
					}
					>.text-over {
						
					}


				}

				> .zan {
					color: #DCDCDC;
					font-size: 23upx;
					margin-right: 10upx;
					text-align: right;
					&.liked {
						color : $a4;
					}
				}
			}
		}
	}
</style>
